import VueRouter from "vue-router";
import Vue from "vue";

const Home = () => import("@/pages/Home");
const Login = () => import("@/pages/Login");
const News = () => import("@/pages/Home/News");
const Music = () => import("@/pages/Home/Music");
const Game = () => import("@/pages/Home/Game");
const NotFound = () => import("@/pages/NotFonud/404");
const MusicDetail = () => import("@/pages/Home/Music/MusicDetail");
const NewsDetail = () => import("@/pages/Home/News/NewsDetail");
const GameDetail = () => import("@/pages/Home/Game/GameDetail");

Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      redirect: "/Home",
    },
    {
      path: "/Home",
      component: Home,
      // name: "Home",
      children: [
        {
          path: "News",
          component: News,
          name: "News",
          // 三级路由
          children: [
            {
              path: "NewsDetail",
              component: NewsDetail,
              name: "NewsDetail",
              // props 是一个函数
              props: route => {
                return {
                  ...route.params,
                  ...route.query,
                  classRoom: "0516",
                  count: "71",
                };
              },
            },
          ],
        },
        {
          path: "Music",
          component: Music,
          name: "Music",
          children: [
            {
              path: "MusicDetail/:id/:age?",
              component: MusicDetail,
              name: "MusicDetail",
            },
          ],
        },
        {
          path: "Game",
          component: Game,
          name: "Game",

          // meta元信息
          children: [
            {
              /* params参数可以设置可选 */
              path: "GameDetail",
              component: GameDetail,
              name: "GameDetail",
              meta: {
                hidden: true,
                icon: "plus",
              },
              props: route => {
                return {
                  ...route.meta,
                };
              },
            },
          ],
        },
        {
          path: "",
          redirect: "News",
        },
      ],
    },
    {
      path: "/Login",
      component: Login,
      name: "Login",

      //路由独享守卫
      beforeEnter: (to, from, next) => {
        console.log(to, from, next);
        console.log("我是login的独享守卫");
        next();
      },
    },

    //404配置卸载最下边
    {
      path: "/*",
      component: NotFound,
    },
  ],
});


/* 

路由守卫具体分为全局路由守卫、独享守卫以及组件路由守卫。
全局路由守卫有三种：
  全局前置守卫: beforeEach
  全局解析守卫: beforeResolve
  全局后置守卫: afterEach

  全局前置守卫：router.beforeEach
    当一个导航触发时，全局前置守卫按照创建顺序调用
  全局解析守卫：router.beforeResolve
    在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
    注释:当我们访问某个路由的时候,当前路由组件被解析,并且组件内守卫也触发了,
    但是还没有把路由组件交给router-view展示(导航确认之前)
  全局后置守卫：router.afterEach
    afterEach 和beforeEach相反，它是在路由跳转完成后触发，参数包括to,from没有了next
    它发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫）之前'

路由独享守卫-beforeEnter:()=>{}   
  场景:守卫login,如果已经登录,则直接送去home页


组件路由守卫
  进入前   beforeRouteEnter 
  路由变化时  beforeRouteUpdate
  离开后   beforeRouteLeave 

    beforeRouteEnter: 路由组件内守卫:进入时
      注意:这个守卫执行的时候,实例还没有产生,所以内部获取不到this
      独一无二,在这个守卫的next方法接受一个回调函数作为参数,而不是接受一个to作为参数
      当调用next方法之后,说明我们要放行,那么当前组件的组件实例就可以产生了,在这个回调函数内部就可以访问到this了

    beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用
       举例: 一个带有动态参数的路径之间跳转时(Music/:id 在Music/1和Music/2之间跳转)
       由于会渲染同样的 Music 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
       可以访问组件实例 `this`

    beforeRouteLeave
      在导航离开渲染该组件的对应路由时调用
      与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
*/


//全局前置守卫  当一个导航触发时，全局前置守卫按照创建顺序调用
router.beforeEach((to, from, next) => {
  /* 
    to:要去的路由对象 (通俗说 要去哪)
    from:来源的路由对象 (通俗说 来自哪)v
    next:是一个函数,必须书写,否则直接停止到当前位置   钩子函数，里面定义参数，确认下一步路由要做什么
      例: 
      + next():直接放行
      + next(false):中断当前导航
      + next(string|location):指定导航地址
  */
  console.log(to, from, next, "全局前置守卫");

  next();
  // next("/login");
});

/* 
  全局解析守卫: 和 router.beforeEach 类似
    在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
    注释:当我们访问某个路由的时候,当前路由组件被解析,并且组件内守卫也触发了,
    但是还没有把路由组件交给router-view展示(导航确认之前)
*/
router.beforeResolve((to, from, next) => {
  console.log(to, from, next, "全局解析守卫");
  next();
});

//暴露router，注入到vue实例中
export default router;
